<template>
  <div class="viewDetail">
    <div class="viewDetail-title flex pl-16 bg_fff c_text2">
      <div
        class="tab-item commhover mr-26"
        :class="{ active: activetab == 1 }"
        @click="handleTab(1)"
      >
        规则设置
      </div>

      <!-- <el-tooltip effect="dark" placement="top" popper-class="commtooltip">
        <div slot="content">
          查看/编辑生效的具体群聊信息，请至<br />单号配置模式该功能下操作
        </div> -->
      <!--  hovernot c_text4 -->
      <div
        class="tab-item commhover"
        :class="{ active: activetab == 2 }"
        @click="handleTab(2)"
      >
        生效群
      </div>
      <!-- </el-tooltip> -->
    </div>
    <template v-if="activetab == 1">
      <div class="viewDetail-big">
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-width="130px"
          label-position="left"
          size="small"
        >
          <el-form-item label="拉群模式：" prop="type">
            <el-radio-group v-model="form.type" class="flex">
              <!-- <div
                v-for="(item, index) in moduleList"
                :key="index"
                class="radiobox bg_fff commhover c_text2 mr-12"
              > -->
              <el-radio
                v-for="(item, index) in moduleList"
                :key="index"
                size="medium"
                :label="item.value"
                class="radiobox bg_fff commhover mr-12"
              >
                <span class="c_text2"> {{ item.label }}</span>
                <div class="c_text3 f-12 mt-8">{{ item.info }}</div>
              </el-radio>
              <!-- </div> -->
            </el-radio-group>
          </el-form-item>
          <el-form-item label="方案名称：" prop="name">
            <el-input
              v-model="form.name"
              clearable
              placeholder="请输入方案名称，最长15个字"
              maxlength="20"
              show-word-limit
              style="width: 100%; max-width: 588px"
            ></el-input>
          </el-form-item>
          <el-form-item v-if="form.type == 1" label="触发方式：" prop="name">
            <el-checkbox-group v-model="form.way">
              <div
                v-for="(item, index) in ways"
                :key="index"
                class="mycheckbox mb-16"
              >
                <div class="check_header bg_f7f7f7 plr-12 flex aligncenter">
                  <el-checkbox :label="item.value"
                    ><span class="c_text2"> {{ item.label }}</span></el-checkbox
                  >
                </div>
                <div class="check_body p-16">
                  <AddKeyword
                    v-model="form['chatKeyword' + item.value]"
                    inputWidth="560px"
                    :listlength="10"
                  />
                </div>
              </div>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item v-if="form.type == 2" label="触发方式：">
            <div class="mycheckbox mb-16">
              <div class="check_header bg_f7f7f7 plr-12 flex aligncenter">
                <span class="c_text2"> 仅自己触发</span>
              </div>
              <div class="check_body p-16">
                <AddKeyword
                  v-model="form['chatKeyword4']"
                  inputWidth="560px"
                  :listlength="10"
                />
              </div>
            </div>
          </el-form-item>
          <div class="divide"></div>
          <template v-if="form.type == 1">
            <div class="kw_tips flex mb-20">
              <div class="kw_icon mt-2"><i class="el-icon-warning"></i></div>
              <div class="kw_content">
                <div>
                  1、客户群人数多于40人后，需要发送群邀请链接，客户确认后才能进群
                </div>
                <div>2、已在群中的客户不会重复邀请</div>
                <div>
                  3、优先拉入已选择的客户群，全部完成后，系统会根据设置自动新建客户群
                </div>
              </div>
            </div>
            <el-form-item label="选择客户群：" prop="radio">
              <el-radio-group v-model="form.radio">
                <el-radio :label="1">
                  <span class="c_text">选择具体客户群</span>
                </el-radio>
                <el-radio :label="2"
                  ><span class="c_text">根据条件筛选群聊</span></el-radio
                >
              </el-radio-group>
              <!-- 选择具体客户群 -->
              <div v-if="form.radio == 1" class="mt-16">
                <el-button class="bg_fff" @click="handerSelectGroup">重新选择客户群</el-button>
                <div
                  class="selectfinshbox flex flex aligncenter flexwrap bg_fff p-6 mt-8"
                >
                  已选：
                  <div class="flex">
                    <img
                      v-for="item in 4"
                      :key="item"
                      src="https://wework.qpic.cn/wwpic/576270_jL0ikDqEQ1SA2FC_1697685555/0"
                      class="mr-4 selectimg"
                      alt=""
                    />
                  </div>
                  <div
                    class="morebox selectimg flexcenter f-16 bg_fff commhover"
                    @click="handerSelectGroup"
                  >
                    <i class="el-icon-more"></i>
                  </div>
                  等 <span class="c_primary plr-6">5</span> 个客户群
                </div>
              </div>
              <!-- 根据条件筛选 -->
              <div v-if="form.radio == 2" class="groupbox pb-20 p-16 mt-10">
                <GroupForm />
                <div class="flexbetween bg_f7f7f7 p-5 pl-8 pr-8 e_exclude">
                  <div class="fw-6 flexcenter">
                    设置排除条件
                    <el-switch
                      v-model="form.exclude"
                      active-color="#3070ff"
                      inactive-color="#c7c5c5"
                      :active-value="1"
                      :inactive-value="0"
                      class="ml-6"
                    >
                    </el-switch>
                  </div>
                  <div class="c_warning2">开启后将排除满足以下条件客户群</div>
                </div>
                <GroupForm v-if="form.exclude == 1" />
              </div>
              <div v-if="form.radio == 2" class="groupbox-foot plr-16">
                <el-checkbox v-model="form.checked1">
                  <span class="c_text"
                    >符合条件新群自动加入（建群5分钟时判断是否符合）</span
                  >
                </el-checkbox>
              </div>
            </el-form-item>
            <el-form-item label="群人数上限：" prop="num">
              <el-input
                v-model="form.num"
                clearable
                placeholder=""
                type="number"
                style="width: 90px"
                @blur="handleBlurNumber('num', 50)"
              ></el-input>
              <div class="c_text3 mt-2">
                已选择和自动新建的客户群，群成员达到设置值，自动递补拉入下一个群
              </div>
            </el-form-item>
            <el-form-item label="自动新建群：" prop="status">
              <div class="flex aligncenter">
                <el-switch
                  v-model="form.status"
                  inactive-color="#BFBFBF"
                  :active-value="1"
                  :inactive-value="0"
                >
                </el-switch>
                <span class="c_text3 pl-10">开启后，群不够自动新建</span>
              </div>
            </el-form-item>
            <el-form-item label="群名称：" prop="status">
              <div class="c_text">
                <el-input
                  v-model="form.groupname"
                  clearable
                  placeholder="请输入"
                  maxlength="15"
                  show-word-limit
                  style="width: 310px"
                ></el-input>
                <span class="pl-20 pr-20">群自动编号，从</span>
                <el-input
                  v-model="form.no"
                  clearable
                  placeholder=""
                  type="number"
                  style="width: 90px"
                  @blur="handleBlurNumber('no', 999)"
                ></el-input>
                <span class="pl-20"> 开始</span>
              </div>
              <div class="c_text3 mt-2">
                举例：群名称“团购群”，编号从3开始。则新建群的名称为“团购群3”“团购群4”“团购群5”……
              </div>
            </el-form-item>
            <div class="divide"></div>

            <el-form-item label="发送内容：">
              <div>
                <el-button icon="el-icon-plus" class="bg_fff" @click="addClient"
                  >添加客户</el-button
                >
                <el-button icon="el-icon-plus" class="bg_fff" @click="addEchat"
                  >添加企业成员</el-button
                >
              </div>
            </el-form-item>
            <el-form-item label="入群前引导语：" prop="status">
              <div class="flex aligncenter">
                <el-switch
                  v-model="form.status"
                  inactive-color="#BFBFBF"
                  :active-value="1"
                  :inactive-value="0"
                >
                </el-switch>
                <span class="c_warning2 pl-10"
                  >客户群人数少于40人直接拉群；40人后若开启引导语，会先发送引导语，再发送邀请链接</span
                >
              </div>
            </el-form-item>
            <el-form-item label="">
              <MaterialContent ref="material" :maxlength="6" />
            </el-form-item>
          </template>
          <template v-if="form.type == 2">
            <el-form-item label="群名称：" prop="groupname">
              <LabelTextarea
                v-model="form.groupname"
                :tagList="tagList"
                class="labelwidth"
              />
            </el-form-item>
            <el-form-item label="新建群固定成员：">
              <div>
                <el-button icon="el-icon-plus" class="bg_fff" @click="addClient"
                  >添加客户</el-button
                >
                <el-button icon="el-icon-plus" class="bg_fff" @click="addEchat"
                  >添加企业成员</el-button
                >
              </div>
              <div
                class="selectfinshbox flex flex aligncenter flexwrap bg_fff p-6 mt-8"
              >
                已选：
                <div class="flex">
                  <img
                    v-for="item in 4"
                    :key="item"
                    src="https://wework.qpic.cn/wwpic/576270_jL0ikDqEQ1SA2FC_1697685555/0"
                    class="mr-4 selectimg"
                    alt=""
                  />
                </div>
                <div class="morebox selectimg flexcenter f-16 bg_fff commhover">
                  <i class="el-icon-more"></i>
                </div>
                等 <span class="c_primary plr-6">5</span> 个客户
              </div>

              <div
                class="selectfinshbox flex flex aligncenter flexwrap bg_fff p-6 mt-8"
              >
                已选：
                <div class="flex">
                  <img
                    v-for="item in 4"
                    :key="item"
                    src="https://wework.qpic.cn/wwpic/576270_jL0ikDqEQ1SA2FC_1697685555/0"
                    class="mr-4 selectimg"
                    alt=""
                  />
                </div>
                <div class="morebox selectimg flexcenter f-16 bg_fff commhover">
                  <i class="el-icon-more"></i>
                </div>
                等 <span class="c_primary plr-6">5</span> 个企业成员
              </div>
            </el-form-item>
            <el-form-item label="每日新建群上限：" prop="number">
              <el-input
                v-model="form.number"
                clearable
                placeholder=""
                type="number"
                style="width: 90px"
                @blur="handleBlurNumber('number', 50)"
              ></el-input>
              <span class="c_text3 pl-10">个群</span>
            </el-form-item>
          </template>
        </el-form>
      </div>
      <div class="greetfoot flexcenter bg_fff p-12">
        <el-button v-hasPermi="['single:keywordinvite:save']" type="primary" size="small" @click="handleSave"
          >保存配置</el-button
        >
        <!-- <el-button type="warning" size="small" @click="saveApplicate"
          >保存并应用配置</el-button
        > -->
      </div>
    </template>
    <div v-if="activetab == 2">
      <!-- <ActiveGroupSingle /> -->
      <ActiveGroupMutil />
    </div>
    <select-wechat v-if="showWechat" :visableIf.sync="showWechat" />
    <!-- 添加客户 -->
    <SelectClient
      v-if="showclient"
      :visable.sync="showclient"
      width="800px"
      height="500px"
    />
    <!-- 添加企业成员 -->
    <EwechatUser
      v-if="showEchart"
      :visable.sync="showEchart"
      :showremark="false"
      placeholder="搜索成员的姓名、实名"
    />

    <SelectClientGroup
      v-if="showgroup"
      width='1000px'
      height='500px'
      :visable.sync="showgroup"
      title="选择客户群"
    />
  </div>
</template>

<script>
//import {listUser, delUser,} from "@/api/system/user";
import GroupForm from "@/components/UserGroupComp/components/GroupForm";
import { listUser } from "@/api/system/user";
import MaterialContent from "@/components/MaterialContent";
import MaterialContentGroup from "@/components/MaterialContentGroup";
import SelectWechat from "@/components/UserGroupComp/SelectWechat.vue";
import AddKeyword from "@/components/AddKeyword";
import LabelTextarea from "@/components/LabelTextarea";
import ActiveGroupSingle from "./ActiveGroupSingle.vue";
import ActiveGroupMutil from "./ActiveGroupMutil.vue";
import SelectClient from "@/components/UserGroupComp/SelectClient";
import EwechatUser from "@/components/UserGroupComp/EwechatUser";
import SelectClientGroup from "@/components/UserGroupComp/SelectClientGroup";
export default {
  name: "addOrEditUserOperations",
  components: {
    GroupForm,
    MaterialContent,
    MaterialContentGroup,
    SelectWechat,
    AddKeyword,
    LabelTextarea,
    ActiveGroupSingle,
    ActiveGroupMutil,
    SelectClient,
    EwechatUser,
    SelectClientGroup
  },
  data() {
    return {
      activetab: 1, //当前选中
      moduleList: [
        {
          value: 1,
          label: "多客户模式",
          info: "邀请多个客户进同个群聊，群满后进下个群",
        },
        { value: 2, label: "单客户模式", info: "新建立每个客户的专属群聊" },
      ],
      form: {
        type: 1,
        name: "",
        way: [],
        exclude: 0,
        chatKeyword1: [],
        chatKeyword2: [],
        chatKeyword3: [],
        chatKeyword4: [], //仅自己
        num: 500,
      },
      rules: {
        name: [{ required: true, message: "请输入标签名称", trigger: "blur" }],
      },
      ways: [
        { value: 1, label: "聊天双方都可触发" },
        { value: 2, label: "仅客户可触发" },
        { value: 3, label: "仅自己触发" },
      ],
      showWechat: false,
      tagList: [
        { name: "称呼/昵称", value: "{{称呼/昵称}}" },
        { name: "当前备注", value: "{{当前备注}}" },
      ],
      showclient: false,
      showEchart: false,
      showgroup: false
    };
  },
  props: {
    info: {
      type: Object,
      default: {},
    },
  },
  created() {
    if (this.info) {
      this.form.name = this.info.planName;
    }
  },
  methods: {
    handleTab(type) {
      this.activetab = type;
    },

    handleBlurNumber(type, maxnumber) {
      // 使用正则表达式匹配正整数
      const regex = /^[1-9]\d*$/;
      // 如果输入的值不是正整数，则将其设置为上一个有效值
      if (!regex.test(this.form[type])) {
        this.form.min = maxnumber;
      } else {
        if (this.form[type] > 500) {
          this.form[type] = maxnumber;
        }
      }
    },
    // /** 查询用户列表 */
    // getList() {
    //   this.loading = true;
    //   listUser(this.addDateRange(this.queryParams, this.dateRange)).then(
    //     (response) => {
    //       this.tableDataList = response.rows;
    //       this.total = response.total;
    //       this.loading = false;
    //     }
    //   );
    // },
    /** 搜索按钮操作 */
    // handleQuery() {
    //   this.queryParams.pageNum = 1;
    //   this.getList();
    // },

    saveApplicate() {
      this.showWechat = true;
    },

    addClient() {
      this.showclient = true;
    },

    addEchat() {
      this.showEchart = true;
    },

    handerSelectGroup(){
      this.showgroup = true
    },

    handleSave() {
      console.log("this.form:", this.form);
    },
  },
};
</script>
<style lang="scss" scoped>
.viewDetail {
  height: 100%;
  position: relative;
  // overflow-y: auto;
  .viewDetail-title {
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #e9e9e9;
    .tab-item {
      height: 100%;
      border-bottom: 2px solid transparent;
      &.active {
        color: #3070ff;
        border-bottom-color: #3070ff;
      }
    }
  }
  .viewDetail-footer {
    position: absolute;
    left: 0px;
    bottom: 0px;
    right: 0px;
    display: flex;
    height: 50px;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #eee;
  }
  .tips {
    background: #ffede3;
    position: relative;
    display: flex;
    align-items: center;
    padding: 8px 15px;
    word-wrap: break-word;
  }
}
.viewDetail-big {
  height: calc(100vh - 200px);
  overflow-y: auto;
  padding: 20px;
}
.radiobox {
  width: 288px;
  height: 72px;
  padding: 16px 10px 16px 16px;
  border-radius: 2px;
  border: 1px solid #e9e9e9;
  display: inline-flex;
  font-size: 14px;
  &.is-checked {
    border: 1px solid #3070ff;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
  }
}
.g_line {
  color: rgba($color: #000000, $alpha: 0.06);
  margin: 0px 20px;
}
.groupbox {
  border: 1px solid rgb(238, 238, 238);
}
.e_exclude {
  width: 568px;
  margin: 20px 0;
}
.groupbox-foot {
  display: flex;
  align-items: center;
  height: 46px;
  background: #f5f6f7;
  border-radius: 2px;
  outline: 1px solid #e9e9e9;
}
.greetfoot {
  border-top: 1px solid #e9e9e9;
  position: sticky;
  bottom: 0;
  z-index: 999;
}
.mycheckbox {
  border: 1px solid #f0f0f0;
  border-radius: 4px 4px 0 0;
}
.check_header {
  height: 46px;
}
.divide {
  width: 100%;
  margin: 24px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.kw_tips {
  padding: 8px 15px;
  word-wrap: break-word;
  border-radius: 4px;
  background: rgba(47, 84, 235, 0.1);
  border-color: rgba(47, 84, 235, 0.1);
}
.kw_icon {
  width: 24px;
  color: #5976ef;
  i {
    font-size: 16px;
    transform: rotate(180deg);
  }
}
.labelwidth {
  max-width: 586px;
}

.selectfinshbox {
  width: 588px;
  border-radius: 2px;
  border: 1px solid #e9e9e9;
}
.selectimg {
  width: 32px;
  height: 32px;
  overflow: hidden;
  border-radius: 2px;
}
</style>
